<%@ page contentType='text/html; charset=UTF-8'%>
 
<%@ taglib prefix='s' uri='/struts-tags'%>

<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-ui-1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jqGrid-4.0.0/css/ui.jqgrid.css" />' />
<link rel='stylesheet' type='text/css' href='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.css" />' />
<script type='text/javascript' src='<s:url value="/plugins/jquery-ui-1.8.13/js/jquery-ui-1.8.13.custom.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/i18n/grid.locale-es.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jqGrid-4.0.0/js/jquery.jqGrid.min.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.ajaxQueue.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.autocomplete.js" />'></script>
<script type='text/javascript' src='<s:url value="/plugins/jquery-autocomplete/jquery.bgiframe.min.js" />'></script>

<p>
<input type='button' id='agregar' value='Agregar' />
<input type='button' id='editar' value='Editar' />
<!-- Suspensión de inscripción -->
<input type='button' id='eliminar' value='Eliminar' />
<input type='button' id='buscar' value='Buscar' /></p>
<div id='i-gridContainer'>
    <table id='inscripcionGrid'><tr></tr></table>
</div>
<div id='pager'></div>

<script type='text/javascript'>
var w = {
      currentRow: null
    },
    buildSelect = function(options, elem, val){
        var $s = undefined === elem ? $('<select></select>') : $(elem);
        $s.empty();
        $.each(options.split(';'), function(){
            var opt = this.split(':');
            opt[0] = opt[0].replace(/_/g, ':');
            opt[1] = opt[1].replace(/_/g, ':');
            var selected = undefined !== val && opt[0] == val ? ' selected=\'selected\'' : '';
            $s.append('<option value=\'' + opt[0] + '\'' + selected + '>' + opt[1] + '</option>');
        });
        return $s;
    },
    htmlSelect = function(options){
        var $s = buildSelect(options);
        return '<select>' + $s.html() + '</select>';
    }
    formOptions = {
        addCaption: 'Agregar registro de inscripción',
        editCaption: 'Modificar registro de inscripción',
        modal: true,
        recreateForm: true,
        bSubmit: 'Guardar',
        bCancel: 'Cancelar',
        bClose: 'Cerrar',
        saveData: 'Se han modificado datos, desea guardar?',
        bYes: 'Sí',
        bNo: 'No',
        bExit: 'Cancelar',
        errorTextFormat: function(msg){
           msg = jQuery.parseJSON(msg.responseText);
           var r = '<ul class="jq-error-ul">';
           $.each(msg, function(key, val){
               r += '<li><b>' + key + '</b>:' + val + '</li>';
           })
           return r + '</ul>';
        }
    },
    formEditOptions = {},
    formCreateOptions = {};

$.extend(formEditOptions, formOptions, {
    url: '<s:url action="editarInscripcion" />',
    closeAfterEdit: true
});
$.extend(formCreateOptions, formOptions, {
    url: '<s:url action="crearInscripcion" />',
    closeAfterAdd: true
});


jQuery('#inscripcionGrid').jqGrid({  
    url:'<s:url action="listarInscripcion" />',
    datatype: 'json',  
    colNames:['Oferta', 'Estudiante', 'Pago','Confirmada','Descripcion','Costo','Curso'],  
    colModel:[  
        {
            name: 'oferta',
            index: 'oferta',
            width:200,
            editable: true,
            searchoptions: {
                dataInit: function(elem){
                    $(elem).autocomplete('<s:url action="autocompleteOferta" />', {
                        width: 260,
                        selectFirst: false
                    }).result(function(event, data, formatted) {
                        $(elem).change();
                    }).focus();
                }
            }
        },
        {
            name:'estudiante',
            index:'estudiante',
            width:70,
            searchoptions: {
                dataInit: function(elem){
                    $(elem).autocomplete('<s:url action="autocompleteUsuario" />', {
                        width: 260,
                        selectFirst: false
                    }).result(function(event, data, formatted) {
                        $(elem).change();
                    }).focus();
                }
            }
        },  
        {
            name:'pago',
            index:'pago',
            width:50,
            editable:true,
            searchoptions: {
                dataInit: function(elem){
                    $(elem).autocomplete('<s:url action="autocompletePago" />', {
                        width: 260,
                        selectFirst: false
                    }).result(function(event, data, formatted) {
                        $(elem).change();
                    }).focus();
                }
            }
        },
        {
            name:'confirmada',
            index:'confirmada',
            width:30,
            editable: true
        },       
        {
            name: 'descripcion',
            index: 'descripcion',
            width: 80,
            editable: true
        },       
        {
            name: 'costo',
            index: 'costo',
            width: 30,
            editable: true
        },       
        {
            name: 'curso',
            index: 'curso',
            width: 200,
            editable: true,
            searchoptions: {
                dataInit: function(elem){
                    $(elem).autocomplete('<s:url action="autocompleteCurso" />', {
                        width: 260,
                        selectFirst: false
                    }).result(function(event, data, formatted) {
                        $(elem).change();
                    }).focus();
                }
            }
        }
    ],
    rowNum:20,
    rowList:[10,20,50,100],
    pager: $('#pager'),
    viewrecords: true,
    sortorder: 'desc',
    caption: 'Inscripcion',
    width:650,
    height: 'auto',
    onSelectRow: function(id){
        $('#editar,#eliminar').removeAttr('disabled');
        w.currentRow = id;
    },
    onPaging: function(){
        $('#editar,#eliminar').attr('disabled', true);
        w.currentRow = null;
    }
});
$('#editar').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('#inscripcionGrid').editGridRow(w.currentRow, formEditOptions);
});
$('#agregar').click( function() {
    $('#inscripcionGrid').editGridRow('new', formCreateOptions);
});
$('#eliminar').attr('disabled', true).click( function() {
    if (null == w.currentRow){
        return;
    }
    $('#inscripcionGrid').delGridRow(w.currentRow, {
        url: '<s:url action="eliminarInscripcion" />'
    });
});
$('#buscar').click(function(){
    $('#inscripcionGrid').searchGrid({
        caption: 'Buscar...',
        Find: 'Encontrar',
        Reset: 'Resetear',
        odata : ['igual', 'no igual', 'menor', 'menor o igual','mayor','mayor o igual', 'comienza por','no comienza por','está en','no está en','termina en','no termina en','contiene','no contiene'],
        onInitializeSearch: function(){
            $('div.searchFilter select.opsel').html("<option value='AND'>Todas</option><option value='OR'>Alguna</option>");
        },
        closeAfterSearch: true,
        multipleSearch: true
    });
});
</script>